<template>
	<view class="container">
		<view class="vip">
			<view class="vipbg">
				<view class="headimg"><image :src="User.HeadImg==''?'/static/headimg.png':User.HeadImg" mode="aspectFill"/></view>
				<view class="account"><view class="login" @click="Login()" v-if="User.ID==0">登录</view><view class="realname" v-if="User.ID>0" @click="SaveUser()">ID：{{User.ID}}</view><view class="cardnum" v-if="User.ID>0" @click="SaveUser()">昵称：{{User.NickName}} ＞</view></view>
				
			</view>
			<view class="btnlist">
				<view class="btn" style="width:50%;" @click="ShowHaiBao()"><view class="icon"><image src="/static/haibao.png" mode="aspectFill"/></view><view class="name">个人海报</view></view>
				<view class="btn" style="width:50%;" @click="SpreadList()"><view class="icon"><image src="/static/tuandui.png" mode="aspectFill"/></view><view class="name">我的推广</view></view>
			</view>
		</view>
		<view class="share">
			<view class="title">{{ShareTitle}}</view>
			<view class="context">{{ShareContext}}</view>
			<button open-type="share" class="btn" @click="ToShare()">去分享</button>
		</view>
		
		<view class="checkbook" @click="Exit()" v-if="User.ID>0">退出登录</view>
		<view class="haibao" v-if="ShowDialog">
			<view class="meng"></view>
			<view class="img"><image :src="HaiBao" @click="PrevImg([HaiBao], 0)"/></view>
			<view class="savephoto" @click="SavePhoto()">保存到相册</view> 
			<view class="close"><image src="/static/close.png" @click="CloseDialog"/></view>
		</view>
	</view>
</template>

<script>
	export default {
		onShareAppMessage: function() {
			var UserID = uni.getStorageSync("UserID");
		    return {
		      title: this.Title,
		      path: "pages/index/index?scene="+UserID //这是一个路径
			  //imageUrl: "https://motiandarenku.qiyedaishu.com/img/appshare.png?v=1"
		    }
		},
		data() {
			return {
				Title:'',
				HaiBao:'',
				ShareTitle:'',
				ShareContext:'',
				ShowDialog:false,
				User:{ID:0,HeadImg:''},
				Opacity:0
			};
		},
		onPullDownRefresh() {
			this.Find_MyData(1);
		},
		onPageScroll(res) {
			this.Opacity=res.scrollTop/100;
		},
		onShow() {
			this.Find_MyData();
		},
		onLoad() {
			this.Find_MyData();
		},
		methods:{
			ToShare(){
				this.Util.Loading("请稍候...");
				setTimeout(()=>{
					this.Util.HideLoading();
				},1000);
				
			},
			RewardList(){
				uni.navigateTo({
					url:"/pages/my/rewardlist"
				})
			},
			TakeCash(){
				uni.navigateTo({
					url:"/pages/takecash/takecashlist"
				})
			},
			SaveUser(){
				uni.navigateTo({
					url:"/pages/my/userinfo"
				})
			},
			ShowHaiBao(){
				var data = {};
				data.Act="Find_HaiBao";
				this.Util.Loading("请稍候...");
				this.Util.Post(data, json=>{
					uni.stopPullDownRefresh();
					this.Util.HideLoading();
					this.HaiBao=json.Data.HaiBao;
					this.ShowDialog=true;
				});				
			},
			CloseDialog(){
				this.ShowDialog=false;
			},
			SpreadList(){
				uni.navigateTo({
					url:"/pages/my/spreadlist"
				})
			},
			Login(){
				uni.navigateTo({
					url:"/pages/login/login"
				})
			},
			Find_MyData(){
				var data = {};
				data.Act="Find_MyData";
				if(this.User.ID==0){
					this.Util.Loading("请稍候...");
				}
				this.Util.Post(data, json=>{
					uni.stopPullDownRefresh();
					this.Util.HideLoading();
					this.Title=json.Data.Title;
					this.User = json.Data.User;
					this.HaiBao=json.Data.HaiBao;
					this.ShareTitle=json.Data.ShareTitle;
					this.ShareContext=json.Data.ShareContext;
					console.log(json);
				});
			},
			Exit(){
				this.Util.Confirm("您确定要退出账号吗？",()=>{
					uni.setStorageSync("Token","");
					uni.setStorageSync("OpenID", "");
					uni.setStorageSync("UserID", "");
					uni.$emit("Clear_BookBox");
					this.User={ID:0,HeadImg:'',CardNum:''};
					this.Util.Toast("退出成功，请重新登录",function(){
						uni.navigateTo({
							url:"/pages/login/login"
						})
					});
				});
			},
			PrevImg(urls,index){
				uni.previewImage({
					current:index,
					urls: urls,
					longPressActions: {
						itemList: ['保存图片'],
						success: data=> {
							uni.saveImageToPhotosAlbum({
								filePath: urls[data.index],
								success: d=> {
									this.Util.Toast("已保存至系统相册");
								}
							});
						}
					}
				});
			},
			SavePhoto(){
				this.Util.Loading("保存中...");				
				uni.downloadFile({
					url: this.HaiBao, //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
							  filePath: res.tempFilePath,
							  success: item=> {
								this.Util.HideLoading();
								this.Util.Success("已保存至相册");
							  },fail(res) {
									console.log(res);
								}
							})
						}
					},fail(res) {
						console.log(res);
					}
				});	
			}
		}
	}
</script>

<style lang="scss">
	.container{width:100%; padding-bottom: 30rpx;
		.nav-bar{ position: fixed; width: 100%; top: 0; color: #fff; z-index:3;}
		.nav-bar .nav-title{position:absolute; width:100%; height:100%; background:#5b9f71;  left:0rpx; right:0rpx;}
		.nav-bar .searchs{ width: auto; color: #fff; font-size: 15px; position: absolute; padding-left: 10rpx; display: flex; flex-direction: row; justify-content: space-between;
			.texts{width:auto; padding-right:30rpx; font-size:36rpx;}
		}
		.vip{width:720rpx; height:370rpx; margin-left:15rpx; margin-top:15rpx;
			.vipbg{width:720rpx; height:150rpx; margin-left:0rpx; padding:20rpx; padding-top:30rpx; display:flex; flex-direction: row; background-image: url(/static/vip.png) ;background-repeat: no-repeat; background-size: 100%;
				.headimg{width:100rpx; height:100rpx; border:2rpx solid #ffffff;  border-radius:50rpx; image{width:96rpx; height:96rpx; border-radius:48rpx;}}
				.account{flex:1; height:150rpx; font-size:32rpx; padding-left:10rpx; padding-top:5rpx; color:#484848;
					.realname{width:auto; height:46rpx;}
					.cardnum{width:auto; height:46rpx;}
					.login{width:90rpx; height:60rpx; line-height: 60rpx; margin-top:15rpx; margin-left:10rpx; border-radius:10rpx; background-color: #48c872; text-align:center; color:#ffffff;}
				}
				.userinfo{width:auto; height:150rpx; display:flex; flex-direction: column; align-items: flex-end;
					.usertype{margin-top:-10rpx; margin-bottom: 5rpx; 
						.usergrade{max-width:300rpx; height:50rpx; line-height: 50rpx; overflow: hidden; padding-left:8rpx; padding-right:8rpx; float:right; font-size:29rpx; text-align: center; color:#bb7848; background:linear-gradient(to right,#ffd89d,#f5c485);}
					}
					.userdate{width:auto; height:24rpx; float:right; line-height: 24rpx; font-family: "微软雅黑", Arial; font-size:27rpx; margin-top:10rpx; color:#ab5d26; text-align:justify;}
				}
			}
			.btnlist{width:100%; height:200rpx; padding-left:40rpx; padding-right:40rpx; padding-top:40rpx; background-color: #ffffff; display: flex; flex-direction: row; justify-content: space-around; border-bottom-left-radius: 20rpx; border-bottom-right-radius: 20rpx; 
				.btn{height:200rpx;
					.icon{width:100%; height:90rpx; text-align: center;
						image{width:70rpx; height:70rpx;}
					}
					.name{width:100%; height:40rpx; text-align: center; font-size:32rpx; color:#636363;}
				}
			}
		}
		.share{width:720rpx;height:320rpx;margin:0 auto;background:#fff; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; border-radius: 20rpx; box-shadow:2px 2px 4px #d1d1d0; margin-bottom: 20rpx;
			.title{width:100%; height:60rpx; font-size: 44rpx; text-align: center; padding-top:30rpx; }
			.context{width:100%; height: 100rpx; line-height: 50rpx; font-size:36rpx; color:gray; padding:40rpx; padding-top:10rpx; padding-bottom: 0rpx;}
			.btn{width:200rpx; height:80rpx; line-height: 80rpx; border-radius: 10rpx; text-align: center; font-size:40rpx; background-color: #149c40; color:#ffffff;}
		}
		.menu{width:720rpx; height:auto;
			.line{width:100%; height:100rpx; margin-left:15rpx; border-radius:20rpx; margin-bottom:20rpx; display: flex; background-color: #ffffff; flex-direction: row; padding-right: 20rpx; background-image: url(/static/arrow.png); background-size: 36rpx 36rpx; background-position: right 30rpx center; background-repeat: no-repeat;
				.icon{width:40rpx; height:40rpx; margin-top:31rpx; margin-left:30rpx; margin-right: 20rpx;
					image{width:40rpx; height:40rpx;}
				}
				.name{flex:1; height:100rpx; line-height: 100rpx; color:#636363; font-size:32rpx;}
			}
			.line:active{background-color: #fcfcfc;}
		}
		.checkbook{ width:710rpx; margin-left:20rpx; margin-top:40rpx; margin-bottom: 20rpx; height:90rpx; line-height: 90rpx; border-radius:45rpx;  background-color: #ed653f; color:#ffffff; text-align: center; font-size:36rpx;}
		.haibao{position: fixed; width:100vw; height:100vh; top:0rpx; left:0rpx;
			.meng{width:100vw; height:100vh; background-color: #000000; opacity: 0.7; position: fixed; top:0rpx; left:0rpx;}
			.img{width:calc(100vw - 40rpx); height:calc(100vh - 200rpx); position: absolute; top:20rpx; left:20rpx;
				image{width:100%; height:100%;}
			}
			.savephoto{position: absolute; width:710rpx; height:80rpx; line-height: 80rpx; background-color: #149c40; color:#ffffff; text-align:center; bottom:85rpx; left:20rpx; border-radius: 10rpx;}
			.close{position: absolute; width:100vw; text-align:center; bottom:10rpx; left:0rpx;
				image{width:60rpx; height:60rpx;}
			}
		}
	}
</style>
